<template>
  <div class="wty-content-banner-left">
    <div class="wty-content-banner-left-wrapper">
      <div class="wty-c-b-l-list">
        <ul>
          <li class="wty-c-b-l-list-item" v-for="cat in cats" :key="cat.index">
            <div class="wty-cat-log">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="cat[0].icon" />
              </svg>
            </div>
            <div class="wty-cat-item-wrapper">
              <div
                class="wty-cat-item"
                :class="{ active: index === cat.length - 1 }"
                v-for="(item, index) in cat"
                :key="index"
              >
                {{ item.type }}
              </div>
            </div>
            <div class="cat-right-arrow">
              <span class="el-icon-arrow-right"></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="wty-c-b-l-title">全部分类</div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      cats: []
    };
  },
  created() {
    Axios.get("http://192.168.101.74:9000/category").then(resp => {
      this.cats = resp.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.wty-content-banner-left {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba($color: #000000, $alpha: 0.1);
  border-top: none;
  .wty-content-banner-left-wrapper {
    width: 100%;
    height: 100%;
    background-color: white;
    position: relative;
    .wty-c-b-l-list {
      width: 100%;
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column; // 方向

        .wty-c-b-l-list-item {
          display: flex;
          flex: 1; // 平分
          align-items: center; // 上下居中
          justify-content: space-between;
          .wty-cat-log {
            flex: 0 0 30px;
            width: 30px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
              font-size: 18px;
            }
          }
          .wty-cat-item-wrapper {
            display: flex;
            flex: 1;
            justify-content: flex-start;
            white-space: nowrap; // 不折行
            overflow: hidden;
            .wty-cat-item::after {
              content: "/";
              padding: 0 2px;
            }
            .active::after {
              content: "";
            }
          }
          .cat-right-arrow {
            flex: 0 0 30px;
            width: 30px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          &:hover {
            background-color: orange;
          }
        }
      }
    }
    .wty-c-b-l-title {
      width: 228px;
      height: 50px;
      padding-top: 15px;
      box-sizing: border-box;
      border: 1px solid rgba($color: #000000, $alpha: 0.1);
      border-bottom: none;
      position: absolute;
      left: 0;
      top: -50px;
      background-color: white;
      text-indent: 15px;
      font-size: 19px;
      font-weight: bolder;
    }
  }
}
</style>
